import React, { Component } from "react";
import VehicleNo from "components/layoutc/VehicleNo";
import "./rightcarlist.less";

class RightCarList extends Component {
  constructor() {
    super();
    this.state = {
      clickItemIndex: -1,
      carTypeObj: ["班线客运", "旅游包车", "危险品运输"],
      obj: [
        {
          pos: [106.13671854382292, 32.08089565426977],
          type: 1,
          status: 1,
          carObj: {
            no: "陕abc34",
            color: 1
          }
        },
        {
          pos: [108.90831523875299, 29.54988392691483],
          type: 2,
          status: 0,
          carObj: {
            no: "陕abc34",
            color: 2
          }
        },
        {
          pos: [110.35125374779791, 32.69082422434047],
          type: 1,
          status: 1,
          carObj: {
            no: "陕abc34",
            color: 3
          }
        }
      ]
    };
  }
  itemClickHandler = (ev, index, item) => {
    this.setState({ clickItemIndex: index });
    this.props.onItemClick(index, item);
  };
  render() {
    return (
      <div className="car-list">
        {this.state.obj.map((item, index) => (
          <div
            className={[
              `item ${this.state.clickItemIndex === index ? "active" : ""}`
            ]}
            key={index}
            onClick={ev => {
              this.itemClickHandler(ev, index, item);
            }}
          >
            <div className="row1">
              <VehicleNo carObj={item.carObj} />
              <span className="c-type">
                {this.state.carTypeObj[item.type - 1]}
              </span>
              <span
                className={[`c-status ${item.status === 1 ? " active" : ""}`]}
              >
                {item.status === 1 ? "在线" : "离线"}
              </span>
            </div>
            <div className="font-small font-color-l-light">
              陕西省西安市蓝田县G40(沪陕高速)
            </div>
          </div>
        ))}
      </div>
    );
  }
}
export default RightCarList;
